<template>
  <div>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        检索到 <code>{{ list.length }}</code>
        条关于 <code class="has-text-info">{{ keyword }}</code> 的记录
      </div>
      <div>
        <article v-for="post in list" :key="post.id"   class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"> 
            </figure>
          </div>
          <div class="media-content">
            <div class="">
              <p class="ellipsis is-ellipsis-1">
                <el-tooltip class="item" :content="post.title" effect="dark" placement="top">
                  <router-link :to="{ name:'postDetail',params:{id: post.id} }">
                    <span class="is-size-6">{{ post.title }}</span>
                  </router-link>
                </el-tooltip>
              </p>
            </div>
            <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
              <div class="level-left">
                <div class="level-left">
                  <router-link class="level-item" :to="{}">
                    ardai
                  </router-link>

                  <span class="mr-1">
                    发布于: {{ post.createTime }}
                  </span>

                  <span class="is-hidden-mobile">浏览: {{ post.view }}</span>
                </div>
              </div>
            </nav>
          </div>
          <div class="media-right" />
        </article>
      </div>

    </el-card>
  </div>
</template>

<script>
import { searchPost } from '../api/post'

export default {
  name: 'Search',
  data() {
    return {
      list: [],
      keyword: this.$route.params.title,
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
       searchPost(this.keyword).then(res=>{
           const result = res.data;
           if(result.code == 0){
               this.list = result.data;
               this.$message({
                   message: result.msg,
                   type: "success",
                   duration: 2*1000
               });
           }else{
                this.$message({
                   message: result.msg,
                   type: "success",
                   duration: 2*1000
               });
           }
       })
    }
  },
  //监控路由的变化对同一组件进行数据渲染
  watch:{
      '$route'(to){
          this.keyword = to.params.title;
          this.fetchList();
      }
  }
}
</script>

<style scoped>

</style>